<!--
 * @Author: byron
 * @Date: 2022-02-08 22:27:55
 * @LastEditTime: 2022-02-09 00:01:56
-->
<template>
    <transition name="popup">
        <div class="popup">
            <slot name="body"></slot>
        </div>
    </transition>
</template>

<style lang="less" scoped>
.popup {
    position: fixed;
    min-width: 200px;
    right: 0;
    top: 92px;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 0 20px 10px rgb(220, 220, 220, 0.3);
    &.popup-enter-active {
        animation: popup-enter 0.6s ease-out;
    }
    &.popup-leave-active {
        animation: popup-leave 0.6s ease-out;
    }
}
@keyframes popup-enter {
    0% {
        transform: translateX(100%);
    }

    100% {
    }
}
@keyframes popup-leave {
    0% {
    }

    100% {
        transform: translateX(100%);
    }
}
</style>
